<template>
  <div class="overflow-hidden">
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="文件下载"> 文件流下载、base64流下载、文件地址下载 </n-card>
    </div>
    <n-card :bordered="false" class="mt-4">
      <n-alert :show-icon="false"> 根据后台接口文件流下载 </n-alert>
      <n-button type="info" class="my-4" @click="handleDownData"> 文件流下载 </n-button>
      <n-alert :show-icon="false"> base64流下载 </n-alert>
      <n-button type="info" class="my-4" @click="handleDownBase64"> base64流下载 </n-button>
      <n-alert :show-icon="false"> 根据文件地址下载文件 </n-alert>
      <n-button type="info" class="my-4" @click="handleDownUrl"> 文件地址下载 </n-button>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
  import { downloadByUrl, downloadByData, downloadByBase64 } from '@/utils/file/download';
  import imgBase64 from './imgBase64';
  const handleDownData = () => {
    downloadByData('test text!!!', 'testName.txt');
  };
  const handleDownBase64 = () => {
    downloadByBase64(imgBase64, 'logo.png');
  };
  const handleDownUrl = () => {
    downloadByUrl({
      url: `https://funskicdn.zhoukaiwen.com/qzmg-1717319624203835`,
      fileName: 'logo.png',
    });
  };
</script>
